<template>
    <aside class="path-mode-wrap m-b bt-line">
        <h4 class="path-mode__title no-select m-b">绘制path路径</h4>
        <div class="path-mode__item">
            <h5 class="title">粗细</h5>
            <input
                class="size-input__picker cursor"
                step="1"
                min="1"
                v-model="sizeValue"
                max="25"
                type="range"
                @input="onSizeUpdate"
            />
            <span class="path-size_value">{{ sizeValue }}</span>
        </div>
        <div class="path-mode__item">
            <h5 class="title">填充</h5>
            <input
                class="color-input__picker cursor"
                v-model="selectColor"
                type="color"
                list=""
                @input="onChangeColor"
            />
            <span class="path-size_value">{{ selectColor }}</span>
        </div>
    </aside>
    <div id="Canvas" style="height: 300px">
        <canvas id="canvas" class="canvas-wrap"></canvas>
    </div>
</template>

<script setup>
import { test } from "./tools";
import { fabric } from "fabric";

let canvas;
const sizeValue = ref(1);
const selectColor = ref("#18a058");

function onSizeUpdate(evt) {
    const { value = "" } = evt.target;
    canvas.freeDrawingBrush.width = parseInt(value);
}

function onChangeColor(evt) {
    const { value = "" } = evt.target;
    canvas.freeDrawingBrush.color = value;
}

nextTick(() => {
    var Canvas = document.querySelector("#Canvas");
    canvas = new fabric.Canvas("canvas");
    canvas.setWidth(Canvas.clientWidth);
    canvas.setHeight(Canvas.clientHeight);
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.color = "rgba(2, 0, 36, 1)";
    canvas.freeDrawingBrush.width = 1;
});
</script>

<style lang="scss">
.canvas-wrap {
    border: 1px solid #272727;
    height: 40vh;
}
.path-mode {
    font-size: 14px;
    &__title {
        font-size: 14px;
    }
    &__item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 12px;
        .title {
            font-size: 14px;
            margin-right: 5px;
        }
        .path-size_value {
            padding-left: 5px;
            font-weight: bold;
        }
        .select-size {
            flex: 1;
        }
        input[type="color"] {
            // border: none;
            // background: none;
            // -webkit-appearance: none;
            // appearance: none;
            border-width: 0px;
            // border-style: none;
            outline: none;
            border-radius: 3px;
        }
    }
}
</style>
